import React,{Component} from 'react'
// import Header from '../component/header'
import {Pagination} from 'element-react'
import api from '../api/index'
import URL from 'url'
import '../assets/css/base.css'
import '../assets/css/index.css'
import 'element-theme-default'

class LogContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            unfold: true,
        };
        this.toggleFold = this.toggleFold.bind(this);
    }
    toggleFold() {
        console.log('哈哈')
        this.setState({unfold: !this.state.unfold})
    }
    render() {
        return (
            <section className="list-item flexbox">
                <div className="item-version">
                    <p className="item-title">版本{this.props.log.version}</p>
                    <p>{this.props.log.uploadDate}</p>
                </div>
                <div className={`item-main ${this.state.unfold ? 'unfold' : ''}`}>
                    <div dangerouslySetInnerHTML={{ __html:this.props.log.content }}></div>
                    <a className={`main-btn ${this.state.unfold ? 'main-btn-unfold' : ''}`}
                       href='javascript:;'
                       onClick={this.toggleFold}>
                        {this.state.unfold ? '展開' : '收起'}</a>
                </div>
            </section>
        );
    }
}

class History extends Component {
    constructor(props) {
        super(props);
        console.log('版本記錄頁面-------------')
        this.state = {
            detail: {},
            logs: [],
            env: 0,
            data: {},
            id: ''
        };
    }
    componentDidMount() {
        // 获取页面参数
        let params = URL.parse(window.location.href, true).query
        console.log(params)
        // this.setState({
        //     env: Number(params.env),
        //     id: Number(params.id)
        // })
        // this.setState((prevState, props) => ({
        //     env: Number(params.env),
        //     id: Number(params.id)
        // }))
        // this.state.id = Number(params.id)
        this.setState({
            env: Number(params.env),
            id: Number(params.id)
        }, () => {
            this.getLog(1)
        })
        console.log('****************************')
        console.log(this.state)
        this.getDetail(params.id)
        // this.getLog(1)
    }
    getDetail = (accessId) =>{
        console.log(this.state.env)
        // axios.post('http://192.168.1.250:9093/property-app/api/v1/access/log',qs.stringify({accessId}))
        //     .then(res => {
        //         console.log(res)
        //         const detail = res.data.data;
        //         this.setState({ detail });
        //     });
        api.log({accessId}).then((res) => {
            console.log(res)
            const detail = res.data;
            this.setState({ detail });
        })
    }
    getLog = (page) => {
        const accessId = this.state.id
        api.loadData({accessId, page}).then(res => {
            console.log(res)
            const logs = res.data;
            const data = res;
            this.setState({ logs });
            this.setState({ data });
        })
        // axios.post('http://192.168.1.250:9093/property-app/api/v1/access/log/loadData',qs.stringify({accessId, page}))
        //     .then(res => {
        //         console.log(res)
        //         const logs = res.data.data;
        //         const data = res.data;
        //         this.setState({ logs });
        //         this.setState({ data });
        //     });
    }
  render() {
    return (
      <div className="App">
          {/*<Header env={this.state.env}/>*/}
          <main className="main history">
              <div className="wrap">
                  <section className="history-header">
                      <div className="item-desc flexbox">
                          {/*<div className="item-logo">*/}
                              {/*<img src={require(`../assets/images/${this.state.detail.icon}`)} alt={this.state.detail.name} />*/}
                          {/*</div>*/}
                          <div>
                              <p className="item-title">{this.state.detail.name}</p>
                              <p className="item-text">{this.state.detail.desc}</p>
                          </div>
                      </div>
                      <p>首發日期:{this.state.detail.firstDate}</p>
                      <p>更新日期:{this.state.detail.modifyDate}</p>
                      {this.state.detail.url ?
                      <a href={this.state.detail.url} className="button"
                         target="_blank">訪問</a>
                          :<a href={`./download.html?id=${this.state.detail.id}&env=${this.state.env}`} className="button" >下載</a>
                      }
                  </section>
                  <section className="history-main">
                      <div className="main-slide">
                          <p className="item-title">版本記錄</p>
                      </div>
                      <div className="list">
                          {this.state.logs.length > 0 ?
                              this.state.logs.map(log =>
                                  <LogContent key={log.id} log={log} />
                              )
                               : <h1 className='list-null'>暫無記錄</h1>
                          }
                      </div>
                  </section>
                  {this.state.logs.length > 0 &&
                  <Pagination
                      total={this.state.data.count}
                      onCurrentChange={this.getLog}
                      pageSize={20}/>
                  }
              </div>
          </main>
      </div>
    );
  }
}

// ReactDOM.render(<History />, document.getElementById('root'));
export default History
